<template>
    <a-layout id="components-layout-demo-top-side">
        <a-layout-header>
            <my-header></my-header>
        </a-layout-header>
        <div class="create-container">
            <a-layout-content>
                <!--<a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>Home</a-breadcrumb-item>
                    <a-breadcrumb-item>List</a-breadcrumb-item>
                    <a-breadcrumb-item>App</a-breadcrumb-item>
                </a-breadcrumb>-->
                <a-layout style="padding: 24px 0;background: #fff">
                    <a-layout-sider class="create-container-slider" width="200" style="background: #fff">
                        <a-button type="danger" @click="toBlogCreateCenter">Mrakdown编辑器</a-button>
                        <a-menu mode="inline" :default-selected-keys="['1']" :default-open-keys="['sub1']" class="menu-container">
                            <a-sub-menu class="sub-menu-one" key="sub1">
                                <span slot="title"><a-icon type="home"/>博客首页</span>
                                <a-menu-item key="1" style="padding: 0">
                                    <router-link to="/blogCreateCenter/blogHome"></router-link>
                                    首页详情
                                </a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu class="sub-menu-two" key="sub2">
                                <span slot="title"><a-icon type="file-protect"/>博客管理</span>
                                <a-menu-item key="5" style="padding: 0">
                                    <router-link to="/blogCreateCenter/articleManage"></router-link>
                                    文章管理
                                </a-menu-item>
                                <a-menu-item key="6" style="padding: 0">
                                    <router-link to="/blogCreateCenter/commentManage"></router-link>
                                    评论管理
                                </a-menu-item>
                                <a-menu-item key="7" style="padding: 0">
                                    <router-link to="/blogCreateCenter/categoryColumn"></router-link>
                                    分类专栏
                                </a-menu-item>
                                <a-menu-item key="8" style="padding: 0">
                                    <router-link to="/blogCreateCenter/blogSettings"></router-link>
                                    博客设置
                                </a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu class="sub-menu-three" key="sub3">
                                <span slot="title"><a-icon type="download"/>下载中心</span>
                                <a-menu-item key="9" style="padding: 0">
                                    <router-link to="/blogCreateCenter/uploadResources"></router-link>
                                    上传资源
                                </a-menu-item>
                                <a-menu-item key="10" style="padding: 0">
                                    <router-link to="/blogCreateCenter/uploadDetails"></router-link>
                                    上传明细
                                </a-menu-item>
                                <a-menu-item key="11" style="padding: 0">
                                    <router-link to="/blogCreateCenter/pointsDetails"></router-link>
                                    积分明细
                                </a-menu-item>
                                <a-menu-item key="12" style="padding: 0">
                                    <router-link to="/blogCreateCenter/downloadDetails"></router-link>
                                    下载明细
                                </a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu class="sub-menu-four" key="sub4">
                                <span slot="title"><a-icon type="account-book"/>收益中心</span>
                                <a-menu-item key="13" style="padding: 0">
                                    <router-link to="/blogCreateCenter/revenueCenter"></router-link>
                                    收益详情
                                </a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu class="sub-menu-five" key="sub5">
                                <span slot="title"><a-icon type="line-chart"/>数据观星</span>
                                <a-menu-item key="14" style="padding: 0">
                                    <router-link to="/blogCreateCenter/stargazing"></router-link>
                                    数据详情
                                </a-menu-item>
                            </a-sub-menu>
                        </a-menu>
                    </a-layout-sider>
                    <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                        <router-view></router-view>
                    </a-layout-content>
                </a-layout>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                赣ICP备20000449号-3 | dscn created @2020 05
            </a-layout-footer>
        </div>
    </a-layout>

</template>

<script>
    import MyHeader from "@/views/home/components/header/index";

    export default {
        name: "index",
        components: {MyHeader},
        data() {
            return {}
        },
        methods: {
            toBlogCreateCenter() {
                this.$router.push("/writeBlogMd")
            }
        }
    }
</script>

<style scoped>

    .ant-menu-submenu-title{
        padding: 0;
        margin: 0;
    }

    .sub-menu-one {
        border-top: darkgrey 1px solid;
        margin-top: 5px;
        margin-left: 0;
        text-align: center;
    }

    .sub-menu-two, .sub-menu-three, .sub-menu-four, .sub-menu-five {
        border-top: darkgrey 1px solid;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    #components-layout-demo-top-side .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 28px 16px 0;
        float: left;
    }

    .create-container {
        width: 1200px;
        margin: 65px auto 0 auto;
        /*width: 100%;*/
        /*margin-left: 320px;*/
        /*float: left;*/
    }

    .create-container-slider {
        text-align: center;
    }

</style>
